<template>
    <div class="new">
        <div>
            <div style="float:left">
                <el-button size='small' @click="showModal()">新增</el-button>
            </div>
            {{params.title}}
            <div style="float:right">
                <el-form :inline="true" class="demo-form-inline" size='small'>
                <el-form-item>
                    <el-input v-model="params.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item>
                <el-select v-model="params.categoryId" placeholder="请选择栏目" clearable>
                    <el-option v-for="item in categories" :key='item.id' :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                </el-form>
            </div>
        
        
        
        
        
        </div>
        <el-table :data="tableData" style="width: 100%" size='small'>
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="title" label="标题" width="200"></el-table-column>
            <el-table-column prop="category.name" label="所属分类" width="200"></el-table-column>
            <el-table-column prop="publishTime" label="发布时间" width="200"></el-table-column>
            <el-table-column prop="readTimes" label="阅读次数" width="200"></el-table-column>
            <el-table-column prop="thumpUp" label="点赞" width="200"></el-table-column>
            <el-table-column prop="status" label="状态" width="200"></el-table-column>
            <el-table-column label="操作" width="200">
                <template v-slot='scope'>
                    <el-button type="primary" @click="change(scope.row)">修改</el-button>
                    <el-button type="danger" @click='deleteNew(scope.row)'>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination layout="prev, pager, next" 
        :total="total" 
        :page-size='params.pageSize' 
        :current-page='params.page' 
        @current-change='pageChange'>
        </el-pagination>


        <el-dialog title="发布新闻资讯" :visible.sync="dialogFormVisible" width="80%">
            <el-form :model="form">{{form}}
                <el-form-item label="标题" :label-width="formLabelWidth">
                     <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属分类" :label-width="formLabelWidth">
                <el-select v-model="form.categoryId" placeholder="分类">
                    <el-option v-for="item in categories" :key='item.id' :label="item.name" :value="item.id"></el-option>
                </el-select>
                </el-form-item>
                 <el-form-item label="内容" :label-width="formLabelWidth">
                     <Tinymce v-model="form.content"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="fabu()">发 布</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/http/axios'
import Tinymce from  '@/components/Tinymce'
import qs from 'qs'
export default {
    //自定义组件
    components:{
        Tinymce
    },
    data(){
        return {
            params:{
                page:1,
                pageSize:10
            },
            tableData:[],
            total:0,
            form:{},
            formLabelWidth:'120px',
            dialogFormVisible : false,
            categories:[],

            
        }
    },
    created(){
        this.queryNews()
        this.findAllcategory()
    },
    watch:{
        // 深度监听
        params:{
            handler:function(){
                this.queryNews()
            },
            deep:true
        }
    },
    methods:{
        change(item){
            //引用传递   还有值传递
            this.form=JSON.parse(JSON.stringify(item))
            this.dialogFormVisible = true
        },
        findAllcategory(){
            axios({
                url:'http://121.199.29.84:8001/category/findAll',
                method:'get'
            }).then((res)=>{
                this.categories=res.data.data
            })
        },
        // 分页页码改变时触发赋值
        pageChange(page){
            this.params.page = page
        },
        // 分页查询所有的新闻
        queryNews(){
            axios({
                url:'http://121.199.29.84:8001/article/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
        },
        showModal(){
            this.dialogFormVisible = true 
            //清空对话框
            this.form={}
        },
        
        
        fabu(){

            axios({
                url:'http://121.199.29.84:8001/article/saveOrUpdate',
                method:'post',
                data:qs.stringify(this.form)
            }).then((res)=>{
                this.queryNews()
            })
            this.dialogFormVisible = false
        },



        deleteNew(item){
            let obj={
                id:item.id
            }
            
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                    
                    axios({
                        url:'http://121.199.29.84:8001/article/deleteById',
                        method:'get',
                        params:obj
                    }).then((res)=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.queryNews()
                    })
                   
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            
        }
        
    }
}
</script>